<!DOCTYPE html>
<html>

<body>
    <!-- <input type="file" class="js_photo_input" id="input" accept="image/*" multiple style="display: none;" />
    <div id="input"></div>-->
    <canvas id="canvas" width="400" height="400" class="my"></canvas>
    <div class="test_btn">
        <img src="img/btn_test.png" />
        <input type="file" id="file" class="upImg" accept="image/*" />
    </div>
    <img id="aaa" style="width: 200px;height: 200px;">
    <div class="head">
        <img class="wximage" src="" id="img" />
    </div>
</body>

<script class="_dcdev_preset_" src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

<script>
    window.onload = function () {
        // 绑定事件，监听文件获取
        $('#file').on('change', fileChanged)


        var fileTag = document.getElementById('file');

        fileTag.onchange = function () {

            var file = fileTag.files[0];

            var fileReader = new FileReader();

            fileReader.onloadend = function () {

                if (fileReader.readyState == fileReader.DONE) {

                    document.getElementById('img').setAttribute('src', fileReader.result);

                }

            };

            fileReader.readAsDataURL(file);
        }
    }


    // 获取用户选择的文件
    function fileChanged(e) {
        var files = e.target.files
        if (files[0]) {
            // 获取文件后使用 reset_orientation 函数处理
            reset_orientation(files[0], function (orientation) {
                // orientation 是图片的旋转系数，参考下面的图
                // 一般情况下 iPhone 对图片的旋转为下图的情况 6
                // ctx.rotate(90 * Math.PI / 180) 旋转90度
                // 然后使用 canvas 处理，导出新的图片即可
            })
            return fileHandleShow(files[0])
        }
    }

    function fileHandleShow(data) {
        var img = new Image()
        img.src = "file://" + data.path // 图片的地址
        $(img).load(function () {
            var quality = 0.5 // 压缩系数，默认是 0.92 范围 0 ～ 1
            //生成canvas
            var canvas = document.createElement('canvas')
            var ctx = canvas.getContext('2d')
            var w = 375 * 2,
                h = 375 * 2
            var anw = document.createAttribute("width")
            anw.nodeValue = w
            var anh = document.createAttribute("height")
            anh.nodeValue = h
            canvas.setAttributeNode(anw)
            canvas.setAttributeNode(anh)
            ctx.drawImage(this, -50, 0, w, h)
            var base64 = canvas.toDataURL('image/jpeg', quality) // 这里得到压缩后的 base64 格式的图片
            document.getElementById("aaa").src = base64;
        })
    }

    // 处理 iphone 下图片被系统旋转
    function reset_orientation(file, callback) {
        var reader = new FileReader()
        reader.onload = function (e) {
            var view = new DataView(e.target.result)
            if (view.getUint16(0, false) != 0xFFD8) return callback(-2)
            var length = view.byteLength,
                offset = 2
            while (offset < length) {
                var marker = view.getUint16(offset, false)
                offset += 2
                if (marker == 0xFFE1) {
                    if (view.getUint32(offset += 2, false) != 0x45786966) return callback(-1)
                    var little = view.getUint16(offset += 6, false) == 0x4949
                    offset += view.getUint32(offset + 4, little)
                    var tags = view.getUint16(offset, little)
                    offset += 2
                    for (var i = 0; i < tags; i++)
                        if (view.getUint16(offset + (i * 12), little) == 0x0112)
                            return callback(view.getUint16(offset + (i * 12) + 8, little))
                } else if ((marker & 0xFF00) != 0xFF00) break
                else offset += view.getUint16(offset, false)
            }
            return callback(-1)
        };
        reader.readAsArrayBuffer(file.slice(0, 64 * 1024))
    }

    $(`.wximage`).on('touchstart', function (e) {

        debugger;
        Url = this.src;
        var blob = new Blob([''], {
            type: 'application/octet-stream'
        });

        var url = URL.createObjectURL(blob);

        var a = document.createElement('a');

        a.href = Url;

        a.download = Url.replace(/(.*\/)*([^.]+.*)/ig, "$2").split("?")[0];

        var e = document.createEvent('MouseEvents');

        e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);

        a.dispatchEvent(e);

        URL.revokeObjectURL(url);

    });
</script>



</html>